<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
    <script src="../../org/jquery.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <jy-show color="red">这里是文字</jy-show>
    <script>
        var m = angular.module('app', []);
        m.directive('jyShow', [function() {
            return {
                restrict: 'E',
                template: function(elem, attr) { //elem是当前元素标签的angular对象可以引入jquery用$()包裹，然后用jquery中的方法，attr是属性集合
                    // console.log(elem, attr);
                    //return 123; //返回什么内容就是什么；
                    // return $(elem).html();
                    return "<span style='color:" + attr.color + "'>" + $(elem).html() + "</span>"
                }
            }
        }])
        m.controller('ctrl', ['$scope', function($scope) {
            $scope.name = '老周';
        }])
    </script>
</body>

</html>
